<template>
    <div class="home-top">
        <h3>人气推荐</h3>
        <div class="content">
            <van-card
            v-for="item in goodsList"
            :key="item.id"
            :tag="item.tag"
            :price="item.retail_price"
            :origin-price="item.goods_brief"
            :title="item.list_pic_url">
        </van-card>
        </div>
    </div>
</template>

<script setup>
const goodsList = [
    {
    id:1,
    tag:'TOP1',
    retail_price:'299.00',
    goods_brief:'一级桑蚕丝，轻盈、透气、柔软',
    name: '蚕丝被 正品蚕丝被',
    list_pic_url: '/images/top1.jpg'
    },
    {
    id:2,
    tag:'TOP2',
    retail_price:'88.00',
    origin_price:'98.00',
    goods_brief:'安全,不会侧翻',
    name: '蚕丝被 正品蚕丝被',
    list_pic_url: '/images/top2.jpg'
    }, 
    {
    id:3,
    tag:'TOP3',
    retail_price:'299.00',
    goods_brief:'一级桑蚕丝，轻盈、透气、柔软',
    name: '蚕丝被 正品蚕丝被',
    list_pic_url: '/images/top3.jpg'
    },
    {
    id:4,
    tag:'TOP4',
    retail_price:'299.00',
    goods_brief:'一级桑蚕丝，轻盈、透气、柔软',
    name: '蚕丝被 正品蚕丝被',
    list_pic_url: '/images/top3.jpg'
    },
    {
    id:5,
    tag:'TOP5',
    retail_price:'299.00',
    goods_brief:'一级桑蚕丝，轻盈、透气、柔软',
    name: '蚕丝被 正品蚕丝被',
    list_pic_url: '/images/top3.jpg'
    },
    
]
</script>

<style lang="less" scoped>
.home-top {
    h3 {
        font-size: 22px;
        line-height: 30px;
       text-align: center;
       margin: 0.5rem 0;
    }
    .content {
        --van-tag-primary-color:#FF8000;
        --van-card-font-size:16px;
        --van-card-backgorund:#f9f9f9;
        
    }
    li{
        width: 49.5%;
        img{
            width: 100%;
        }
        p{
            text-align: center;
            margin: 0.5rem 0;
        }
        span {
            color: #FF8000;
            font-size: 12px;
        }
    }
 }
